<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="../../css/style.css" rel="stylesheet">

</head>
</head>
<body>
<div id="app">
  <show_add pname="张三">
    你长得太帅了
  </show_add>
  <show_add pname="李四">
    你长得太萌了
  </show_add>
  <show_add pname="王五">
    你长得太屌了
  </show_add>
</div>
<!-- 1:引包 -->
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('show_add', {
    props: ['pname'],
    template: `<div>
{{pname}}
<slot></slot>
</div>`,
    methods: {
      'myadd': function () {
        var value = 0;
        value = this.a + this.b;
        this.$emit('myclick', {
          result: value
        })
      }
    }
  });
  new Vue({
    el: '#app'
  })
</script>

</body>
</html>
